<script setup lang="ts">
import {reactive, ref} from 'vue';
import {Card, Message} from '@arco-design/web-vue';
import {userRegister} from "@/api/userApi";
import router from "@/router";

// 当前激活的标签页
const activeKey = ref('account');

// 表单数据
const form = reactive({
  userAccount: '',
  userPassword: '',
  checkPassword: '',
  phone: '',
  code: ''
});

// 表单验证规则
const accountRules = {
  userAccount: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    }
  ],
  userPassword: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      min: 8,
      message: '密码长度不能少于6位',
      trigger: 'blur'
    }
  ],
  checkPassword: [
    {
      required: true,
      message: '请再次输入密码',
      trigger: 'blur'
    },
    {
      min: 8,
      message: '密码长度不能少于6位',
      trigger: 'blur'
    }
  ]
};

const phoneRules = {
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur'
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号格式',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 6,
      message: '验证码长度为6位',
      trigger: 'blur'
    }
  ]
};

// 状态管理
const isLoading = ref(false);
const showPassword = ref(false);
const formRef = ref();
const countdown = ref(0);

// 登录处理
const handleRegister = async () => {
  try {
    if (form.userAccount === '' || form.userPassword === '' || form.checkPassword === '') {
      Message.error('请填写完整信息');
      return;
    }
    // 模拟登录请求
    isLoading.value = true;
    console.log('注册信息:', form);
    const res = await userRegister(form);
    console.log(res.data.data)
    if (res.data.code === 0) {
      Message.success('注册成功,请登录');
      isLoading.value = false;
      formRef.value?.resetFields();
      await router.push('/user/login');
    } else {
      Message.error('注册失败');
      isLoading.value = false;
    }
  } catch (error) {
    console.error('表单验证失败:', error);
    isLoading.value = false;
  }
};

// 发送验证码
const sendCode = async () => {
  if (countdown.value > 0) return;

  // 简单验证手机号
  if (!form.phone || !/^1[3-9]\d{9}$/.test(form.phone)) {
    Message.error('请输入正确的手机号');
    return;
  }

  // 开始倒计时
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);

  // 模拟发送验证码请求
  console.log('发送验证码到:', form.phone);
  Message.success('验证码已发送，请注意查收');
};

// 切换密码显示状态
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};
</script>

<template>
  <div class="login-container">
    <a-spin :loading="isLoading">
      <!-- 登录卡片 -->
      <Card class="login-card" :bordered="false">
        <div class="login-header"></div>
        <div class="custom-tabs">
          <div class="center-tabs">
            <a-tabs class="arco-tabs-nav-tab-list" :default-active-key="activeKey">
              <a-tab-pane :key="activeKey" class="arco-tabs-tab-title" title="账号密码">
                <a-form :rules="accountRules" :model="form" :style="{ width: '400px' }">
                  <div class="login-input">
                    <a-form-item field="userAccount" label="账户：" validate-trigger="blur">
                      <a-input :style="{width:'320px'}" v-model="form.userAccount" placeholder="please enter your username..." allow-clear/>
                    </a-form-item>
                    <a-form-item field="userPassword" label="密码：" validate-trigger="blur">
                      <a-input-password :style="{width:'320px'}" v-model="form.userPassword" placeholder="please enter your password..." allow-clear/>
                    </a-form-item>
                    <a-form-item  field="checkPassword" label="密码：" validate-trigger="blur">
                      <a-input-password :style="{width:'320px'}" v-model="form.checkPassword" placeholder="please enter your checkPassword..." allow-clear/>
                    </a-form-item>
                  </div>
                  <div class="login-button" style="margin-top: 5px;">
                    <div style="display: flex; justify-content: space-between;  padding: 0 5px 0 5px">
                      <span><RouterLink to="/user/login">立即登录</RouterLink></span>
                    </div>
                    <a-button style="width: 100%; font-size: 16px; height: 40px;" type="primary" @click="handleRegister">注 册
                    </a-button>
                  </div>

                </a-form>
              </a-tab-pane>
<!--              <a-tab-pane key="phone" title="手机号码">-->
<!--                <a-form :rules="phoneRules" :model="form" :style="{ width: '300px' }" @submit="handleRegister">-->

<!--                </a-form>-->
<!--              </a-tab-pane>-->
            </a-tabs>
          </div>
        </div>
      </Card>
      <!--    <div class="bottom-text">-->
      <!--      <span><a href="">RicheFactory</a></span>-->
      <!--    </div>-->
    </a-spin>
  </div>
</template>

<style scoped>
.login-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/login_bg.svg');
  /* 让背景图覆盖整个容器，保持比例，裁剪多余部分 */
  background-size: cover;
  /* 背景图固定，滚动页面时背景不跟着动（可选，按需调整） */
  background-attachment: fixed;
  /* 背景图居中显示（可选，让视觉更协调） */
  background-position: center;
  /* 防止背景图重复平铺（如果图片小，默认会重复） */
  background-repeat: no-repeat;
  margin: 0; /* 清除默认边距 */
  z-index: 0;
}


.login-card {
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 700px;
  margin-top: -100px;
  padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.95);
}

.center-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 10px; /* 与表单拉开点距离 */
  margin-top: 20px;
  height: 300px;
}


.login-input {
  margin-left: 3px;
  margin-top: 10px;
}

.bottom-text {
  position: absolute;
  bottom: 0; /* 固定在底部 */
  left: 0;
  width: 100%;
  text-align: center; /* 让文字水平居中 */
  padding: 10px 0; /* 给点上下内边距，让文字不贴着底部 */
  background-color: #fff; /* 可选，设置背景色覆盖下方内容，避免重叠 */
}

.arco-tabs-nav-tab-list::v-deep(.arco-tabs-nav-tab) {
  justify-content: center;
  width: 100%;
  transform: translateX(0px);
}


.arco-tabs-tab-title::v-deep(.arco-tabs-tab-title)  {
  width: 100px;
  text-align: center;
}


</style>
